<template>
  <!-- 详情 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form :model="ruleForm" ref="ruleForm" label-width="auto" v-loading="loading">
      <!-- 平台服务费 -->
      <el-row :gutter="24" v-if="type === 1">
        <el-col :span="8">
          <el-form-item label="贷款天数">
            <span>{{ ruleForm.days }} 天</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="贷款金额">
            <span>{{ ruleForm.loanAmount | thousands }} 元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="平台服务费">
            <span>{{ ruleForm.serviceFee | thousands }} 元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务费比例">
            <span>{{ ruleForm.serviceRatio }} %</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="放款日期">
            <span>{{ ruleForm.timeLoan | dateYMDHMSFormat }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="还款日期">
            <span>{{ ruleForm.timeRepayment | dateYMDHMSFormat }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="公式">
            <span>{{ ruleForm.expression }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 仓储费 -->
      <el-row :gutter="24" v-if="type === 2">
        <el-col :span="8">
          <el-form-item label="在仓天数">
            <span>{{ ruleForm.days }} 天</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓储费单价">
            <span>{{ ruleForm.charge | thousands }} 元 / 天</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="仓储费">
            <span>{{ ruleForm.storeFee | thousands }} 元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入仓时间">
            <span>{{ ruleForm.storeInTime | dateYMDHMSFormat }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出仓时间">
            <span>{{ ruleForm.storeOutTime | dateYMDHMSFormat }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公式">
            <span>{{ ruleForm.expression }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 保证金 -->
      <el-row :gutter="24" v-if="type === 5">
        <el-col :span="8">
          <el-form-item label="保证金">
            <span>{{ ruleForm.deposit | thousands }} 元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保证金比例">
            <span>{{ ruleForm.marginRatio }} %</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="价格">
            <span>{{ ruleForm.price | thousands }} 元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公式">
            <span>{{ ruleForm.expression }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 利息 -->
      <el-row :gutter="24" v-if="type === 7">
        <el-col :span="8">
          <el-form-item label="贷款天数">
            <span>{{ ruleForm.days }} 天</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="利息">
            <span>{{ ruleForm.interest | thousands }} 元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="贷款金额">
            <span>{{ ruleForm.loanAmount | thousands }} 元</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="授信利率">
            <span>{{ ruleForm.rate }} %</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="放款日期">
            <span>{{ ruleForm.timeLoan | dateYMDHMSFormat }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="还款日期">
            <span>{{ ruleForm.timeRepayment | dateYMDHMSFormat }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="公式">
            <span>{{ ruleForm.expression }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { expenseState } from "@/utils/status.js";
export default {
  data() {
    return {
      dialogVisible: false,
      loading: false,
      ruleForm: {},
      title: "",
      type: null,
    };
  },
  methods: {
    handleOpen(item) {
      this.loading = true;
      const url = expenseState[item.type].port;
      const params = {
        billId: item.id,
      };
      this.type = item.type;
      this.title = expenseState[item.type].label;
      this.$get({ url, params }).then((res) => {
        this.ruleForm = res;
        this.loading = false;
      });
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
